<div class="page page-typography">

	<ol class="breadcrumb breadcrumb-small">
		<li>UI Elements</li>
		<li class="active"><a href="#ui/typography">Typography</a></li>
	</ol>

	<div class="page-wrap">
		<!-- Row 1 -->
		<div class="row">
			<!-- Headers -->
			<div class="col-lg-12">
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Headers</i></div>
					<div class="panel-body">
						<h1>h1. Bootstrap Heading <small>secondary text</small></h1>
						<br/>
						<h2>h2. Bootstrap Heading <small>secondary text</small></h2>
						<br/>
						<h3>h3. Bootstrap Heading <small>secondary text</small></h3>
						<br/>
						<h4>h4. Bootstrap Heading <small>secondary text</small></h4>
						<br/>
						<h5>h5. Bootstrap Heading <small>secondary text</small></h5>
						<br/>
						<h6>h6. Bootstrap Heading <small>secondary text</small></h6>
						
					</div>
				</div>
			</div>
			<!-- #end headers -->
		</div>
		<!-- #end row 1 -->

		<!-- Row 2 -->
		<div class="row">
			<div class="col-lg-6">
				<!-- Body copy -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Body Copy</i></div>
					<div class="panel-body">
						<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
						<br>
						<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
					</div>
				</div>
				<!-- #end body-copy -->

				<!-- Inline Text Elements -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Inline Text Elements</i></div>
					<div class="panel-body">
						<p>You can use the mark tag to <mark>highlight</mark> text.</p>
						<p><del>This line of text is meant to be treated as deleted text.</del></p>
						<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
						<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
						<p><u>This line of text will render as underlined</u></p>
						<p><small>This line of text is meant to be treated as fine print.</small></p>
						<p>The following snippet of text is <strong>rendered as bold text.</strong></p>
						<p>The following snippet of text is <em>rendered as italicized text</em></p>
					</div>
				</div>
				<!-- #end Inline text elements -->

				<!-- Alignment Classes -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Type Classes</i></div>
					<div class="panel-body">
						<p class="text-left">Left aligned text.</p>
						<p class="text-center">Center aligned text.</p>
						<p class="text-right">Right aligned text.</p>
						<p class="text-justify">Justified text.</p>
						<p class="text-nowrap">No wrap text.</p>
						<p class="text-lowercase">Lowercased text.</p>
						<p class="text-uppercase">Uppercased text.</p>
						<p class="text-capitalize">Capitalized text.</p>
					</div>
				</div>
				<!-- #end alignment classes -->

				<!-- Codes -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Codes</i></div>
					<div class="panel-body">
						<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
						<p>Keyboards: <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>
					</div>
				</div>
				<!-- #end codes -->
			</div>
			<!-- #end col -->

			<div class="col-lg-6">
				<!-- Addresses -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Addresses</i></div>
					<div class="panel-body">
						<address>
							<strong>Twitter, Inc.</strong><br>
							795 Folsom Ave, Suite 600<br>
							San Francisco, CA 94107<br>
							<abbr title="Phone">P:</abbr> (123) 456-7890
						</address>

						<address>
							<strong>Full Name</strong><br>
							<a href="mailto:#">first.last@example.com</a>
						</address>
					</div>
				</div>
				<!-- #end addresses -->

				<!-- Blockquote -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Blockquotes</i></div>
					<div class="panel-body">
						<blockquote>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
						</blockquote>
						<blockquote>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
							<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
						</blockquote>
						<blockquote class="blockquote-reverse">
					  		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
					  		<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
						</blockquote>
					</div>
				</div>
				<!-- #end blockquote -->

				<!-- Lists -->
				<div class="panel panel-lined mb30">
					<div class="panel-heading"><i>Lists</i></div>
					<div class="panel-body">
						<ul>
							<li>Lorem ipsum dolor sit amet</li>
							<li>Consectetur adipiscing elit</li>
							<li>Integer molestie lorem at massa</li>
							<li>Facilisis in pretium nisl aliquet</li>
							<li>Nulla volutpat aliquam velit
								<ul>
									<li>Item One</li>
									<li>Item Two</li>
									<li>Item Three</li>
								</ul>
							</li>
							<li>Faucibus porta lacus fringilla vel</li>
							<li>Aenean sit amet erat nunc</li>
						</ul>
						<hr/>
						<ol>
							<li>Lorem ipsum dolor sit amet</li>
							<li>Consectetur adipiscing elit</li>
							<li>Integer molestie lorem at massa</li>
							<li>Facilisis in pretium nisl aliquet</li>
							<li>Nulla volutpat aliquam velit</li>
							<li>Faucibus porta lacus fringilla vel</li>
							<li>Aenean sit amet erat nunc</li>
						</ol>
					</div>
				</div>
				<!-- #end Lists -->

			</div>
			<!-- #end col -->
		</div>
		<!-- #end row 2 -->
	</div>
</div>